<template>
  <div class="register">
    <div class="back">
      <div class="x"
           @click="hiddenRegister()"><img src="~assets/img/user/x.svg"></div>
      <div class="son">
        <img src="~assets/img/user/phone.svg"
             alt="">
      </div>
    </div>
    <div class="main">
      <div>
        <div class="from-item">
          <input type="text"
                 name="phone"
                 id="phone"
                 placeholder="请输入手机号"
                 required
                 v-model="phone"
                 @blur="phoneVerify()">
          <p>{{phoneMessage}}</p>
        </div>
        <div class="from-item">
          <input type="password"
                 name="password"
                 id="password"
                 placeholder="请输入密码"
                 v-model="password">
          <p>{{pwdMessage}}</p>
        </div>
        <!-- 用户名 -->
        <div class="from-item">
          <input type="text"
                 name="nickname"
                 id="nickname"
                 placeholder="请输入用户名"
                 v-model="nickname">
          <p>{{nickMessage}}</p>
        </div>
        <!-- 验证码 -->
        <div class="from-item">
          <input type="number"
                 name="captcha"
                 id="captcha"
                 placeholder="请输入验证码"
                 v-model="captcha">
          <button class="btn"
                  @click="btnclick()">点击获取验证码</button>
          <p>{{captchaMessage}}</p>
        </div>
        <div class="from-item">
          <input type="submit"
                 value="注册"
                 class="register-btn"
                 @click="register()">
        </div>
        <div class="from-item">
          <div class="login"
               @click="showLogin()">登陆</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _phoneVerify, _getcaptcha, _checkCaptcha, _register } from 'network/user'
export default {
  name: 'Register',
  data () {
    return {
      phone: '',
      phoneMessage: '',
      pwdMessage: '',
      password: '',
      // 验证码
      captcha: '',
      captchaMessage: '',
      // 用户名
      nickname: '',
      nickMessage: ''
    }
  },
  methods: {
    // 隐藏注册界面
    hiddenRegister () {
      this.$store.commit('hiddenRegister')
    },
    // 手机号码验证
    phoneVerify () {
      if (this.phone === '') {
        this.phoneMessage = '请输入手机号'
      } else {
        // res.data.exist=1说明有此账号
        _phoneVerify(this.phone).then(res => {
          if (res.data.exist != -1) {
            this.phoneMessage = '手机号已注册'
          } else {
            this.phoneMessage = ''
          }
        })
      }
    },
    // 点击获取验证码
    btnclick () {
      _getcaptcha(this.phone).then(res => {
        if (res.data.code != 200) {
          this.captchaMessage = "发送验证码失败"
        } else {
          this.captchaMessage = "发送验证码成功"
        }
      })
      _checkCaptcha(this.phone, this.captcha).then(res => {
        console.log(res);
        if (res.data.code != 200) {
          this.captchaMessage = "验证码错误"
        }
      })
    },
    // 注册
    register () {
      _register(this.phone, this.captcha, this.password, this.nickname).then(res => {
        console.log(res);
      })
    },
    // 登陆显示
    showLogin () {
      this.hiddenRegister()
      this.$store.commit("showLogin");
    }
  }
}
</script>

<style scoped>
.register {
  width: 400px;
  height: 560px;
  position: relative;
  z-index: 999;
  top: 0;
  background: #fafafa;
}
.back {
  width: 100%;
  height: 30%;
  position: relative;
}
.back .x {
  width: 26px;
  height: 26px;
  float: right;
  margin-right: 5px;
  margin-top: 5px;
}
.x img {
  width: 100%;
}
.son {
  width: 58px;
  height: 102px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -20%);
}
.son img {
  width: 100%;
}
.main .chooes {
  margin-bottom: 15px;
}
.main span {
  color: #333;
  font-size: 15px;
  padding: 0 60px;
}
.from-item {
  width: 60%;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  color: red;
}
.from-item input {
  width: 200px;
  height: 2em;
}
.from-item p {
  font-size: 13px;
}
.from-item .register-btn {
  outline-style: none;
  background: red;
  color: #fff;
  border: 0;
  height: 40px;
  border-radius: 10px;
}
.login {
  font-size: 13px;
  color: #333;
  text-align: center;
  margin-right: 35px;
}
/* 验证码 */
.btn {
  width: 200px;
  height: 30px;
}
</style>
